<template>
    <div class="course-root">
        <p class="title">辅导员请假审批</p>
        <el-table :data="leaveList" style="width: 100%;margin-top: 30px;">
            <el-table-column prop="id" label="请假单号" width="200" />
            <el-table-column prop="studentId" label="学生学号" width="200" />
            <el-table-column prop="reason" label="事由" width="560" />

            <el-table-column fixed="right" label="操作" min-width="160">
                <template #default="{ row }">
                    <el-button type="danger" plain size="small" @click="handleDisapproval(row)" v-if="row.status == 1">
                        驳回
                    </el-button>
                    <el-button type="success" plain size="small" @click="handlePass(row)" v-if="row.status == 1">
                        批准
                    </el-button>
                    <el-button type="default" plain disabled size="small" v-if="row.status == 2">
                        已通过
                    </el-button>
                    <el-button type="danger" plain disabled size="small" v-if="row.status == 3">
                        已驳回
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { inject, onMounted, reactive, ref } from "vue";
import { ElMessageBox } from "element-plus";
// import BigNumber from 'bignumber.js';
const message = inject("message");
import axios from "../utils/http.ts"
const leaveList = ref([])
import { useUserStore } from "../store/user.ts";
const userStore = useUserStore();
const loadData = async () => {
    const res = await axios.get(`/user/CounselorGetList/${userStore.user.id}`);
    if (res.success) {
        console.log(res.result, "源数据")
        // 假设 API 返回的数据是一个包含 ID 的列表
        // const res1 = res.result.map(item => {
        //   // 避免丢失精度，保持 ID 作为字符串
        //   return {
        //     ...item,
        //     studentName: co // 确保 ID 是字符串
        //   };
        // });
        // console.log(res1, "处理后")
        leaveList.value = res.result;
        console.log("名单", leaveList.value)
    }
}



// const getNameById = async (id) => {
//     const res = await axios.get(`/user/getTeacherNameById/${id}`);
//     if (res.success) {
//         return res.result;
//     }
// }
// const courseIdToDrop = ref(0);
// const handleDrop = (row) => {
//     courseIdToDrop.value = row.course.courseId;
//     // return;
//     ElMessageBox.confirm(
//         '确定退选课程?',
//         '提示',
//         {
//             confirmButtonText: '确定',
//             cancelButtonText: '取消',
//         }
//     )
//         .then(() => {
//             dropCourse();
//         })
//         .catch(() => {
//             return;
//         })
// }


const leaveId = ref(0)
const handlePass = async (row) => {
    console.log(row)
    leaveId.value = row.id;
    const res = await axios.post(`/user/counselor/${leaveId.value}/true`);
    if (res.success) {
        message.success("已通过！");
        loadData();
    }
}

const handleDisapproval = async (row) => {
    leaveId.value = row.id;
    const res = await axios.post(`/user/counselor/${leaveId.value}/false`);
    if (res.success) {
        message.success("已驳回");
        loadData();
    }
}


onMounted(() => {
    loadData();
})
</script>

<style lang="scss" scoped>
.course-root {
    display: flex;
    flex-direction: column;
    padding: 20px;
    padding-top: 30px;
    height: 100%;
    width: 100%;

    .title {
        border-left: 3px solid var(--el-color-primary);
        padding-left: 10px;
        height: 16px;
        line-height: 16px;
        font-weight: 600;
        color: var(--el-menu-text-color);
    }

    .el-table:deep(.el-table__row) {
        height: 56px;
    }
}
</style>